<template>
    <div class="table">
        
        <div style="float: left; margin-top: 10px; margin-left: 40px;width: 200px;">
            <el-text size="large">id：</el-text>
            <el-input class="input2" v-model="problemParm.problemId" @change="getProblemList" :placeholder="$t('problemView.searchInput')" />
        </div>
        
        <div style="float: left; margin-top: 25px;"><el-text size="large">{{ $t('problemView.search') }}</el-text></div>
        <el-input class="input" v-model="problemParm.problemDescribe" @change="getProblemList" :placeholder="$t('problemView.searchInput')"  />
        
        
        <el-dropdown placement="bottom" style="margin-left: 15px; margin-top: 10px;">
            <el-button class="buttom"> {{ $t('problemView.difficulty') }}<el-icon><ArrowDown /></el-icon></el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="handleDifficultyChange(null)">{{ $t('enum.all') }}</el-dropdown-item>
                    <el-dropdown-item @click="handleDifficultyChange(1)">{{ $t('enum.simple') }}</el-dropdown-item>
                    <el-dropdown-item @click="handleDifficultyChange(2)">{{ $t('enum.medium') }}</el-dropdown-item>
                    <el-dropdown-item @click="handleDifficultyChange(3)">{{ $t('enum.difficulty') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <el-dropdown placement="bottom" style="margin-left: 15px; margin-top: 10px;">
            <el-button class="buttom">  {{ $t('problemView.type')}}<el-icon><ArrowDown /></el-icon></el-button>
            
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="handleTypeChange(null)">{{ $t('enum.all') }}</el-dropdown-item>
                    <el-dropdown-item @click="handleTypeChange(1)">{{ $t('enum.single') }}</el-dropdown-item>
                    <el-dropdown-item @click="handleTypeChange(2)">{{ $t('enum.fill') }}</el-dropdown-item>
                    <el-dropdown-item @click="handleTypeChange(3)">{{ $t('enum.judge') }}</el-dropdown-item>
                    <el-dropdown-item @click="handleTypeChange(4)">{{ $t('enum.multiple') }}</el-dropdown-item>
                    <el-dropdown-item @click="handleTypeChange(5)">{{ $t('enum.big') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>


        <el-table :data="problemList.items"  @row-click="handleRowClick"  class="el_table">
            <el-table-column prop="id" show-overflow-tooltip label="id" width="150px"/>
            <el-table-column prop="problemDescribe" show-overflow-tooltip :label="$t('problemView.description')" width="400px"/>
            <el-table-column prop="difficulty" sortable :label="$t('problemView.difficulty')" width="150px" >
                <template #default="scope">
                    {{getDifficultyType(scope.row.difficulty,$t)}}
                </template>
            </el-table-column>
            <el-table-column prop="type" sortable :label="$t('problemView.type')">
                <template #default="scope">
                    {{getProblemType(scope.row.type,$t)}}  
                </template>
            </el-table-column>
            <el-table-column prop="knowledgeList" size="large" show-overflow-tooltip :label="$t('problemView.knowledge')"/>
        </el-table>
        
        <div class="pagination"><el-pagination layout="prev, pager, next" :page-size="problemParm.pageSize" :current-page="problemParm.pageNo" :total="problemList.counts" @current-change="handlePageChange"/></div>
    </div>

    <problemDetailView v-if="showProblemDetail" :showProblemDetail="showProblemDetail" :chooseProblem2="chooseProblem" @update:someProp="showProblemDetail = $event"/>


</template>

<script lang="ts" setup>
    import useProblem from '@/hooks/useProblem'
    import useEnum from '@/base/useEnum'
    import {onMounted} from 'vue'
    import problemDetailView from './son/problemDetailView.vue'
    const {showProblemDetail,chooseProblem,problemList,problemParm,handleTypeChange,handleDifficultyChange,getProblemList,handlePageChange,handleRowClick} = useProblem()
    const {getProblemType,getDifficultyType} = useEnum()
    onMounted(()=>{
        getProblemList()
    })

</script>


<style>
    .el-table__row{
        height: 70px;
    }

    
</style>

<style scoped>
    .input{
        margin-top: 20px;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 20%;
    }

    .input2{
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 70%;
        height: 30px;
    }


    .table{
        margin-left: 10%;
        margin-top: 3%;
        width: 1200px;
        height:650px;
        
        box-shadow: 0 15px 20px rgba(84, 84, 84, 0.3);
        border-radius: 10px;
       
    }

    .el_table{
            margin-top: 10px;
            /* font-size: 21px; */
            min-height: 530px;
            margin-left: 30px;
            width: 95%;
            cursor: pointer;
        }


    .pagination {
        margin-top: 10px;
        display: flex;  
        justify-content: center;
    }

    .buttom{
            margin-top: 10px;
        }

</style> 

